<template>
  <common-dialog ref="dialog" title="分配业务员列表" width="1200px" :in-dialog="inDialog">
    <list ref="list" in-dialog page @get-data="onGetData" :query-params="queryParams" :data="data" :total="total"
      custom-get-data show-query>
      <template #query>
        <el-form-item label="姓名">
          <el-input v-model="queryParams.userName" clearable />
        </el-form-item>
        <el-form-item label="客户类型">
            <el-select v-model="queryParams.customerTypes" clearable multiple collapse-tags>
              <el-option label="船东" :value="1"></el-option>
              <el-option label="航空公司" :value="2"></el-option>
              <el-option label="货代(同行)" :value="3"></el-option>
              <el-option label="直客" :value="4"></el-option>
              <el-option label="拖车行" :value="5"></el-option>
              <el-option label="报关行" :value="6"></el-option>
              <el-option label="仓储" :value="7"></el-option>
              <el-option label="堆场" :value="8"></el-option>
              <el-option label="铁路" :value="9"></el-option>
              <el-option label="快递" :value="10"></el-option>
              <el-option label="码头" :value="11"></el-option>
              <el-option label="其他" :value="12"></el-option>
            </el-select>
          </el-form-item>
      </template>
      <template #column>
        <el-table-column prop="allocationUserName" width="110" label="业务员名称" sortable show-overflow-tooltip>
          <template v-slot="{ row }">
            <span class="c-link" @click="showUserDetail(row.allocationUserId)">{{ row.allocationUserName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="customerName" min-width="200" label="分配客户" sortable show-overflow-tooltip>
          <template v-slot="{ row }">
            <span class="c-link" @click="showCustomerDetail(row.customerId)">{{ row.customerName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="customerType" width="100" label="客户类型" sortable>
          <template v-slot="{ row }">
            <span>{{ row.customerTypeName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="allocationTime" width="120" label="分发时间" sortable>
          <template v-slot="{ row }">
            <span>{{ row.allocationTime | toShortDatetimeString }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" width="100" label="类型" sortable align="center">
          <template v-slot="{ row }">
            <el-tag v-if="row.type == 0" type="info">普通公海池</el-tag>
            <el-tag v-else type="warning">优质公海池</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isValid" width="80" align="center" label="状态" sortable>
          <template v-slot="{ row }">
            <el-tag v-if="row.isValid" type="success">有效</el-tag>
            <el-tag v-else type="info">无效</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="claimStatus" width="100" label="认领状态" sortable align="center">
          <template v-slot="{ row }">
            <el-tag v-if="row.claimStatus" type="success">已认领</el-tag>
            <el-tag v-else type="info">未认领</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="claimTime" width="150" label="认领时间" sortable>
          <template v-slot="{ row }">
            <span v-if="row.claimTime">{{ (row.claimTime | toShortDatetimeString) }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="operationRemark" width="150" label="操作备注" sortable show-overflow-tooltip />
        <el-table-column prop="returnTypeName" width="120" label="退回类型" sortable />
      </template>
    </list>
    <user-detail-dialog in-dialog ref="userDetailDialog" />
    <customer-detail-dialog in-dialog ref="customerDetailDialog" />
  </common-dialog>
</template>
<script>
import commonDialog from "@/components/common/dialog";
// import list from "./examineStatusExceptionList";
import list from "@/components/common/list";
// import listDialogMixins from "@/mixins/listDialog";
import userDetailDialog from "@/components/sso/user/detailDialog";
import customerDetailDialog from "@/components/crm/customer/detailDialog";
import api from "@/api/crm/seaPoolStatistics"

export default {
  components: { commonDialog, list, userDetailDialog, customerDetailDialog },
  // mixins: [listDialogMixins],
  props: {
    inDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      queryParams: {

      },
      data: [],
      total: 0
    }
  },
  methods: {
    async showData(data) {
      await this.$refs.dialog.show();
      this.$refs.list.initData(data);
    },
    async onGetData(params) {
      this.$refs.list.loading(true);
      let res = await api.getAllocationRecords(params);
      this.data = res.data.list;
      this.total = res.data.total;
      this.$refs.list.loading(false);
    },
    showUserDetail(userId) {
      this.$refs.userDetailDialog.openDetail(userId);
    },
    showCustomerDetail(customerId) {
      this.$refs.customerDetailDialog.openDetail(customerId);
    }
  }
};
</script>